<template >
  <div class="app">
      <div>
          <video_Head />
      </div>
      <div>
         <Customize_Head_control @clientId="getClientId"/>
      </div>
      <div class="content">
          <dv-border-box-8 class="left"  :color="['#18213e','#18213e']">
              <Real_time_map class="gd_com_map" :clientId="clientId" v-if="fag"></Real_time_map>
          </dv-border-box-8>
          <dv-border-box-8 class="right"  :color="['#18213e','#18213e']">
              <div class="realtime" v-for="(item, index) in realTimeUrl" :key="index">
                  <div class="line">
                      <div style="background-color: #545a5b;width: 100%;height: 2px;"></div>
                      <div style="background-color: #545a5b;width: 100%;height: 2px;margin-top: 2px;"></div>
                      <div style="background-color: #052912;width: 100%;color: white;height: 20px;">
                       通道 {{index+1}}
                      </div>
                      <div style="background-color: #545a5b;width: 100%;height: 2px;margin-bottom: 2px;"></div>
                      <div style="background-color: #545a5b;width: 100%;height: 2px;"></div>
                  </div>
                  <Customize_flv :url="item"    v-if="fag"/>
              </div>
          </dv-border-box-8>
      </div>
  </div>
</template>
  
<script>

import api from "@/api/api";
import Customize_Head_control from "@/components/video/Customize-Head-control"
import Customize_flv from "@/components/video/Customize-flv";
import Real_time_map from "@/components/video/Real-time-map"
import { ElNotification } from 'element-plus';
import video_Head from "@/components/video/Video_head"
export default {
  props: {

  },
  components: { Customize_flv, Customize_Head_control,Real_time_map,video_Head },
  data: function () {
      return {
          fag: false,
          clientId: "",
          mediaType: 1,
          realTimeUrl: [],
          url: ""
      }
  },
  watch: {
     
  },
  created() {
      
  },
  methods: {
    
      getplay() {
          this.realTimeUrl = this.url
          if (this.url.length <= 0) {
              ElNotification({ title: '错误', message: '获取视频失败', type: 'error', })
          }
      },

      async getClientId(sim){
         this.clientId=sim;
         this.fag = true
          this.realTimeUrl = [];
          this.url = [];
          this.clientId = sim;
          for (var i = 1; i < 5; i++) {
              const result = await api.getRealTimeVideo(sim, i, this.mediaType, 0)
              if (result.code == 0) {
                  ElNotification({ title: '成功', message: '等待视频播放', type: 'success', })
                  this.url.push(result.data.url);
              } else {
                  ElNotification({ title: '警告', message: result.msg, type: 'warning', })
                  return;
              }
          }
          setTimeout(res => this.getplay(), 3000)
      }

  }
}

</script>
<style scoped>
/* 控制按钮 */
.app{
 
 height: 100vh;
 background-image: url("../assets/img/pageBg.png");
}
.content {
  margin-top: 10px;
  clear: both;
  width: 100%;
  height: 82vh;

}
.gd_com_map {
    margin-top: 1.5%;
    margin-left: 1.5%;
    width: 97%;
    height: 97%;
}
.left {
  width: 45%;
  height: 82vh;
  background-color: #10191b;
  float: left;
  margin-left: 1%;
}

.right {
  float: right;
  width: 52%;
  height: 82vh;
  margin-right: 1%;
  background-color: #10191b;
  text-align: center;
}
.line{
  height: 30px;
 
}
.realtime {
  width: 47.8%;
  margin-top: 3%;
  margin-left: 1.5%;
  float: left;
  height: 43%;
  /* background-color: rgb(32, 32, 32); */
  text-align: center;
}
</style>
  